<template>
  <Panel v-loading="loading">
    <div class="student-resume">
      <Basic :data="detailData.personInfo" />
      <Training :data="detailData.practiceTrainings" />
      <Experience :data="detailData.workExperiences" />
      <Education :data="detailData.educations" />
      <Skill :data="detailData.skills" />
      <Evaluation :data="detailData.selfEvaluation" />
    </div>
  </Panel>
</template>

<script>
import Basic from './Basic'
import Training from './Training'
import Experience from './Experience'
import Education from './Education'
import Skill from './Skill'
import Evaluation from './Evaluation'
import { Panel } from 'components'
import { myResume } from 'services/student/resume'
export default {
  name: 'StudentResume',
  components: {
    Panel,
    Basic,
    Training,
    Experience,
    Education,
    Skill,
    Evaluation
  },
  data() {
    return {
      detailData: {}
    }
  },
  methods: {
    async getDetailData() {
      try {
        this.loading = true
        const { data } = await myResume()
        this.detailData = data
      } finally {
        this.loading = false
      }
    }
  },
  created() {
    this.getDetailData()
    this.$bus.$on('resume-update', this.getDetailData)
  },
  beforeDestroy() {
    this.$bus.$off('resume-update')
  }
}
</script>

<style lang="scss" scpoed>
@import 'styles/common.scss';
.student-resume {
  padding: 0.5rem 0.2rem;
  .info-group {
    padding: 0.2rem 0.2rem;
    border-top: 1px solid $colorBorder3;
  }
}
</style>
